/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
    --ifm-color-primary: rgb(66, 153, 244);
    --ifm-color-primary-dark: rgb(58, 129, 153);
    --ifm-color-primary-darker: rgb(39, 86, 102);
    --ifm-color-primary-darkest: rgb(15, 33, 39);
    --ifm-color-primary-light: rgb(156, 202, 217);
    --ifm-color-primary-lighter: rgb(189, 219, 230);
    --ifm-color-primary-lightest: rgb(222, 237, 242);
    --ifm-code-font-size: 95%;
}

:root {
    /* primary colours */
    --amphora-red: #bc312a;
    --amphora-black: #181717;
    --amphora-white: #fffefd;
    /* secondary */
    --turquoise: #5aa6c0;
    --blue-garnet: #0a789e;
    --pearl: #cfd2d6;
    /* text colours */
    --ebony: #222222;
    --stone: #696464;
    /* messaging and alerts */
    --mandarin: #f68d00;
    --plum: #e7140d;
    --apple: #399b1e;
    --berry: #057ed1;
    /* messaging and alert pastels */
    --pear: #fffaed;
    --peach: #fbeae5;
    --avocado: #effae3;
    --yam: #e7f4ff;
    /* backgerounds and dividers */
    --marble: #aaadb0;
    --platinum: #f1f4f6;
    --porcelain: #fcfcfc;
    --main-font: Helvetica, bold, sans-serif;
    --helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fjalla: "Fjalla One", Arial, sans-serif;
}

h1,
h2,
h3,
.nav-item {
    font-family: "Helvetica Neue", sans-serif;
}

.docusaurus-highlight-code-line {
    background-color: rgb(72, 77, 91);
    display: block;
    margin: 0 calc(-1 * var(--ifm-pre-padding));
    padding: 0 var(--ifm-pre-padding);
}

.hero .hero__title {
    font-size: 2.7rem;
}

.hero-banner {
    text-align: center;
    position: relative;
    overflow: hidden;
    background: url("/img/network.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.font_tiny {
    font-size: 12x;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.15px;
    line-height: 1.333;
}

.font_small {
    font-size: 14x;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.15px;
    line-height: 1.143;
}

.font_small_bold {
    font-size: 14x;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    letter-spacing: 0.15px;
    line-height: 1.143;
}

.font_intermediate {
    font-size: 16x;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.15px;
    line-height: 1.375;
}

.font_intermediate_bold {
    font-size: 16x;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    letter-spacing: 0.15px;
    line-height: 1.375;
}

.font_medium {
    font-size: 20x;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.1px;
    line-height: 1.4;
    color: var(--amphora-black);
}

.font_medium_bold {
    font-size: 20x;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    letter-spacing: 0.1px;
    line-height: 1.4;
}

.font_large {
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.3px;
    line-height: 1.333;
}

.font_large_caps {
    font-size: 32px;
    font-family: "Roboto", sans-serif;
    text-transform: capitalize;
    letter-spacing: 0.25px;
    line-height: 1.375;
}

.font_extra_large {
    font-size: 42px;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.3px;
    line-height: 1.174;
}

.font_xxl {
    font-size: 46px;
    font-family: "Roboto", sans-serif;
    letter-spacing: 0.3px;
    line-height: 1.174;
}

.body-1 {
    font-size: 20px;
}

.text--white {
    color: #fffefd;
}

.text--black {
    color: #181717;
}

.price-card {
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 24px 32px;
    fill: #fffefd;
    width: 360px;
    color: #181717;
}

.full-width {
    width: 100%;
}

.opacity-container {
    width: 100%;
    color: white;
    background: rgba(72, 140, 166, 0.8) !important;
}

.avatar {
    border-radius: 15%;
}

html[data-theme='light'] .DocSearch {
    /* --docsearch-primary-color: var(--ifm-color-primary); */
    /* --docsearch-text-color: var(--ifm-font-color-base); */
    --docsearch-muted-color: var(--ifm-color-secondary-darkest);
    --docsearch-container-background: rgba(94, 100, 112, 0.7);
    /* Modal */
    --docsearch-modal-background: var(--ifm-color-secondary-lighter);
    /* Search box */
    --docsearch-searchbox-background: var(--ifm-color-secondary);
    --docsearch-searchbox-focus-background: var(--ifm-color-white);
    /* Hit */
    --docsearch-hit-color: var(--ifm-font-color-base);
    --docsearch-hit-active-color: var(--ifm-color-white);
    --docsearch-hit-background: var(--ifm-color-white);
    /* Footer */
    --docsearch-footer-background: var(--ifm-color-white);
}

html[data-theme='dark'] .DocSearch {
    --docsearch-text-color: var(--ifm-font-color-base);
    --docsearch-muted-color: var(--ifm-color-secondary-darkest);
    --docsearch-container-background: rgba(47, 55, 69, 0.7);
    /* Modal */
    --docsearch-modal-background: var(--ifm-background-color);
    /* Search box */
    --docsearch-searchbox-background: var(--ifm-background-color);
    --docsearch-searchbox-focus-background: var(--ifm-color-black);
    /* Hit */
    --docsearch-hit-color: var(--ifm-font-color-base);
    --docsearch-hit-active-color: var(--ifm-color-white);
    --docsearch-hit-background: var(--ifm-color-emphasis-100);
    /* Footer */
    --docsearch-footer-background: var(--ifm-background-surface-color);
    --docsearch-key-gradient: linear-gradient(-26.5deg,
            var(--ifm-color-emphasis-200) 0%,
            var(--ifm-color-emphasis-100) 100%);
}